<template>
  <div class="main">
    <div id="map-container" class="map-container"></div>
    <div class="tool-bar">
      <el-button size="mini" @click="loadModelHandler">加载模型</el-button>
      <el-button size="mini" @click="loadCZML">显示卫星</el-button>
      <!-- <el-button size="mini" @click="showCarmer">相机</el-button> -->
      <el-button size="mini" @click="drawSome">绘制图形</el-button>
    </div>
  </div>
</template>

<script>
import * as Cesium from 'cesium';
import { loadModel } from './actions';
export default {
  data() {
    return {
      viewer: null
    };
  },
  mounted() {
    this.viewer = new Cesium.Viewer('map-container', {
      baseLayerPicker: false, // 地图选择按钮
      geocoder: false, // 搜索按钮，
      homeButton: false, // 跳转主页按钮
      animation: false, // 动画按钮
      creditsDisplay: false, //
      timeline: false, // 时间轴按钮
      fullscreenButton: false, // 全屏功能显示按钮
      scene3DOnly: false,
      navigationHelpButton: false, // 操作帮助按钮
      infoBox: false,
      selectionIndicator: false,
      sceneModePicker: false, // 是否开启平面图选择
      terrainShadows: Cesium.ShadowMode.DISABLED,
      shouldAnimate: true,
      // useDefaultRenderLoop: false,
      // 使用高德底图
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
      })
    });

    //  去除水印
    this.viewer._cesiumWidget._creditContainer.style.display = 'none';

    // 高德标注
    this.viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
      })
    );
  },

  methods: {
    showCarmer() {
      const heading = Cesium.Math.toDegrees(this.viewer.camera.heading);
      const pitch = Cesium.Math.toDegrees(this.viewer.camera.pitch); // Cesium.Math.toDegrees作用是把弧度转换成度数
      const roll = Cesium.Math.toDegrees(this.viewer.camera.roll);
      console.log(heading, pitch, roll);
    },
    /**
     * 加载模型
     */
    loadModelHandler() {
      this.viewer.entities.removeAll();
      // 加载模型
      const Air = loadModel({ x: 108.96651161003112, y: 34.181382539364115, z: 5000 }, 'model/Cesium_Air.glb');
      const entity = this.viewer.entities.add(Air);
      // this.viewer.flyTo(entity);
      this.viewer.trackedEntity = entity;
    },

    /**
     * 加载CZML文件  卫星星历
     */
    loadCZML() {
      this.viewer.dataSources.add(Cesium.CzmlDataSource.load('satellites/CHINASAT.czml'));
      this.viewer.camera.flyHome();
    },

    /**
     * 绘制物体
     */
    drawSome() {
      this.viewer.entities.removeAll();
      /**
       * 立方柱
       */
      const Cylinder = this.viewer.entities.add({
        name: 'Green cylinder with black outline',
        position: Cesium.Cartesian3.fromDegrees(-108.0, 40.0, 300000.0),
        cylinder: {
          length: 400000.0,
          topRadius: 200000.0,
          bottomRadius: 200000.0,
          material: new Cesium.Color(0.43, 0.78, 0.13, 1),
          outline: false
          // outlineColor: Cesium.Color.DARK_GREEN
        }
      });

      /**
       * 平面
       */
      const plane = new Cesium.Entity({
        name: 'Yellow plane outline',
        position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
        plane: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
          dimensions: new Cesium.Cartesian2(400000.0, 300000.0),
          material: Cesium.Color.RED.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.YELLOW
        }
      });
      this.viewer.entities.add(plane);

      // 添加线段
      const dashedLine = this.viewer.entities.add({
        name: 'Blue dashed line',
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([-75, 40, 500000, -125, 40, 500000]),
          width: 4,
          material: new Cesium.PolylineDashMaterialProperty({
            color: Cesium.Color.CYAN
          })
        }
      });

      this.viewer.flyTo(plane);
      this.viewer.zoomTo(this.viewer.entities);
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  position: relative;
  .map-container {
    width: 100%;
    height: 100%;
  }
  .tool-bar {
    text-align: left;
    position: fixed;
    top: 40px;
    height: 40px;
    line-height: 40px;
    width: 100%;
    z-index: 1000;
    button {
      margin: 0 10px;
    }
  }
}
</style>
